<template>
    <!--更多热门城市-->
    <article id="more-hot-city">
        <div class="public-header-content">
            <div class="header clearfix">
                <i></i>更多热门城市
            </div>
            <div class="content">
                <a-row>
                    <a-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4" :cityId="item.cityId" v-for="(item, index) in hotCityList" :key="index" class="li" @click="goCityDetails(item.cityId)">
                        <div class="inside">
                            <img v-lazy="item.photo" :title="item.title" :alt="item.title" >
                            <div class="font">
                                <span>{{ isNull0(item.title) }}</span>
                                <i class="iconfont icon-iconfontsousuo1" title="点击查看该城市房源"></i>
                            </div>
                        </div>
                    </a-col>
                </a-row>
            </div>
        </div>
    </article>
</template>

<script>
    export default {
        data() {
            return {
                hotCityList: [
                    {
                        cityId:'1',
                        photo:'/static/img/SanFrancisco.jpg',
                        title: '旧金山'
                    },
                    {
                        cityId:'2',
                        photo:'/static/img/LosAngeles.jpg',
                        title: '洛杉矶'
                    },
                    {
                        cityId:'3',
                        photo:'/static/img/NewYork.jpg',
                        title: '纽约'
                    },
                    {
                        cityId:'4',
                        photo:'/static/img/Seattle.jpg',
                        title: '西雅图'
                    },
                    {
                        cityId:'5',
                        photo:'/static/img/Boston.jpg',
                        title: '波士顿'
                    },
                    {
                        cityId:'6',
                        photo:'/static/img/Orlando.jpg',
                        title: '奥兰多'
                    },
                    {
                        cityId:'7',
                        photo:'/static/img/NewJersey.jpg',
                        title: '新泽西'
                    },
                    {
                        cityId:'8',
                        photo:'/static/img/Atlanta.jpg',
                        title: '亚特兰大'
                    },
                    {
                        cityId:'9',
                        photo:'/static/img/Miami.jpg',
                        title: '迈阿密'
                    },
                    {
                        cityId:'10',
                        photo:'/static/img/Dallas.jpg',
                        title: '达拉斯'
                    },
                    {
                        cityId:'11',
                        photo:'/static/img/Houston.jpg',
                        title: '休斯顿'
                    },
                    {
                        cityId:'',
                        photo:'/static/img/NewYork.jpg',
                        title: '更多城市，敬请期待'
                    },
                ],
            }
        },
        computed: {
        },
        created() {},
        mounted() {},
        methods: {
            goCityDetails(cityId){
                //过滤掉最后面的更多城市，敬请期待
                if(!cityId) return;
                this.$router.push({ path: "/City", query: { cityid: cityId } });
            }
        },
        components: {}
    }
</script>
<style scoped lang="less" type="text/less">
    body{
        article#more-hot-city{
            .content{
                >.ant-row{
                    > .li {
                        cursor: pointer;
                        padding: 5px;
                        > .inside {
                            width: 100%;
                            height: 100%;
                            overflow: hidden;
                            position: relative;
                            background: #000;
                            -webkit-transition: .5s;
                            -moz-transition: .5s;
                            -ms-transition: .5s;
                            -o-transition: .5s;
                            transition: .5s;
                            > img {
                                width: 100%;
                                height: 150px;
                                -webkit-transition: .5s;
                                -moz-transition: .5s;
                                -ms-transition: .5s;
                                -o-transition: .5s;
                                transition: .5s;
                            }
                            > .font {
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                top: 0;
                                left: 0;
                                text-align: center;
                                > span {
                                    font-size: 20px;
                                    color: #fff;
                                    font-weight: bold;
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    -webkit-transform: translate(-50%, -50%);
                                    -moz-transform: translate(-50%, -50%);
                                    -ms-transform: translate(-50%, -50%);
                                    -o-transform: translate(-50%, -50%);
                                    transform: translate(-50%, -50%);
                                }
                                > i {
                                    font-size: 25px;
                                    color: #fff;
                                    position: absolute;
                                    top: 35%;
                                    left: 44%;
                                    z-index: 9;
                                    text-align: center;
                                    -webkit-border-radius: 50%;
                                    -moz-border-radius: 50%;
                                    border-radius: 50%;
                                    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
                                    display: inline-block;
                                    opacity: 0;
                                    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
                                    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
                                    -o-transition: -o-transform 0.3s, opacity 0.3s;
                                    transition: transform 0.3s, opacity 0.3s;
                                }
                            }
                            > .font::before,
                            > .font::after {
                                position: absolute;
                                content: '';
                                opacity: 0;
                                transition: all 0.5s;
                            }
                            > .font::before {
                                top: 15px;
                                right: 5px;
                                bottom: 15px;
                                left: 5px;
                                border-top: 1px solid #fff;
                                border-bottom: 1px solid #fff;
                                transform: scale(0, 1);
                                -webkit-transform-origin: 0 0;
                                transform-origin: 0 0
                            }
                            > .font::after {
                                top: 5px;
                                right: 15px;
                                bottom: 5px;
                                left: 15px;
                                border-right: 1px solid #fff;
                                border-left: 1px solid #fff;
                                transform: scale(1, 0);
                                transform-origin: 100% 0;
                            }
                        }
                        > .inside:hover {
                            > img {
                                transform: scale(1.05, 1.05);
                                opacity: 0.5;
                                filter: alpha(opacity=50);
                            }
                            > .font {
                                > span {
                                    display: none;
                                }
                                > i {
                                    opacity: 1;
                                    -webkit-transform: scale(1);
                                    -moz-transform: scale(1);
                                    -ms-transform: scale(1);
                                    -o-transform: scale(1);
                                    transform: scale(1);
                                }
                            }
                            > .font::before,
                            > .font::after {
                                opacity: 1;
                                transform: scale(1);
                                transition: all 0.5s;
                            }
                        }
                    }
                }
            }
        }

    }
</style>